<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CRM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/after-sale"],
            cb: function (o) {
                app.requireCss(['css/wx/icons-extra', 'css/wx/wx-iconfont', 'css/wx/audio'], doc);
            }
        };
    </script>
    <script data-main="../../js/wx/public/config" src="../../js/require.js"></script>

    <link rel="stylesheet" href="../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../css/wx/app.css">
    <link rel="stylesheet" href="../../css/wx/style.css"/>
    <link rel="stylesheet" href="../../css/wx/style-hn.css"/>
    <link rel="stylesheet" href="../../css/wx/crm.css"/>
    <style>

        svg.icon {
            width: 34px;
            height: 34px;
        }

        .wf-iconHr a svg.icon {
            width: 1.2rem !important;
            height: 1.2rem !important;
        }

        .statistics_number {
            font-weight: 800;
            font-size: 17px !important;
            color: #4C6FB0;
        }

        .statistics_title {
            color: #000;
        }

        p {
            font-size: 14px;
        }

        .greenicon {
            font-size: 1.1rem;
            line-height: 0.3;
            position: absolute;
            right: 10px;
            top: 3px;
        }

        .echartBox {
            margin-top: 10px;
            height: 240px;
            width: 100%;
        }

        .echartBox img {
            width: 100%;
            display: block;
        }

        .chart {
            height: 200px;
            margin: 0px;
            padding: 0px;
        }

        .searchBox {
            z-index: 3
        }

        .mui-card {
            margin: 0;
        }

    </style>
</head>

<body>
<div class="zindex_bg"></div>
<!--搜索-->
<div id="searchDiv" class="mui-input-row searchBox" style="position: relative">
    <form action="javascript:app.returnFalse();">
        <div class="noneFouce" @tap.stop="clickIn">
            <p class="left_icon"><i class="mui-icon mui-icon-search"></i>请输入客户/服务单号</p>
            <input type="text" disabled>
        </div>

        <div class="hasFouce" style="display: none">
            <i class="mui-icon mui-icon-search"></i>
            <input @search="toSearch" type="search" class="mui-input-clear" placeholder="请输入客户/服务单号"
                   v-model.trim="keyword" @blur="lostIn(0)">
            <!--            <span class="iconfont icon icon-061"></span>-->

        </div>

        <span @tap.stop="scanQRCode" class="iconfont icon icon-061 posIcon wf-font-color"
              style="font-size: 27px;"></span>
    </form>
</div>

<div id="chartDiv" class="mui-slider" style="height: 310px;margin-top:5px;">
    <!--        <h5>人员负荷图标</h5>-->
    <!--        <div class="echartBox">-->
    <!--            <div id="barChart" style="height: 250px;width: 100%"></div>-->
    <!--        </div>-->
    <!--        <h5>故障分布图表</h5>-->
    <!--        <div class="echartBox">-->
    <!--            <div id="pieChart1" style="height: 100%;width: 100%"></div>-->
    <!--        </div>-->
    <!--        <h5>满意度图表</h5>-->
    <!--        <div class="echartBox">-->
    <!--            <div id="pieChart2" style="height: 100%;width: 100%"></div>-->
    <!--        </div>-->
    <div id="loopDiv" class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
            <h5>故障分布图表</h5>
            <div class="echartBox">
                <div id="pieChart2_duplicate" style="height: 250px;width: 100%"></div>
            </div>
        </div>

        <div class="mui-slider-item">
            <h5>人员负荷图标</h5>
            <div class="echartBox">
                <div id="barChart" style="height: 250px;width: 100%"></div>
            </div>
        </div>

        <div id="mydDiv" class="mui-slider-item">
            <h5>满意度图表</h5>

        </div>

        <div id="gzdiv" class="mui-slider-item">
            <h5>产品故障分布图表</h5>
            <div class="echartBox">
                <div id="pieChart1" style="height: 250px;width: 100%"></div>
            </div>
        </div>

        <div class="mui-slider-item">
            <h5>故障分布图表</h5>
            <div class="echartBox">
                <div id="pieChart2" style="height: 250px;width: 100%"></div>
            </div>
        </div>

        <div class="mui-slider-item mui-slider-item-duplicate">
            <h5>人员负荷图标</h5>
            <div class="echartBox">
                <div id="barChart_duplicate" style="height: 250px;width: 100%"></div>
            </div>
        </div>
    </div>

    <div id="indicator" class="mui-slider-indicator">
    </div>
</div>

<div id="content" class="mui-content" style="margin-bottom: 80px;">
    <div class="iconHr wf-iconHr" style="margin-bottom: 0px;margin-top: 5px;padding: 0 2px;">
        <div class="mui-row" style="width: 97%;margin: auto">
            <div @tap.stop="open('A')" class="mui-col-sm-4 mui-col-xs-4">
                <a href="javascript:;">
                    <div>
                        <p v-text="page.count.PGCOUNT" class="statistics_number"></p>
                        <p class="statistics_title">待派工</p>
                    </div>
                </a>
            </div>
            <div @tap.stop="open('B')" class="mui-col-sm-4 mui-col-xs-4">
                <a href="javascript:;">
                    <div>
                        <p v-text="page.count.BGCOUNT" class="statistics_number"></p>
                        <p class="statistics_title">待报工</p>
                    </div>
                </a>
            </div>
            <div @tap.stop="open('C')" class="mui-col-sm-4 mui-col-xs-4">
                <a href="javascript:;">
                    <div>
                        <p v-text="page.count.HFCOUNT" class="statistics_number"></p>
                        <p class="statistics_title">待回访</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="mui-card after-sale" style="margin-top: 10px;">
        <div class="mui-card-header">
            <div style="font-size: 17px"><span class="iconfont icon icon-02"></span>今日任务</div>
        </div>
        <div v-show="page.taskList.length>0" class="mui-card-content">
            <div v-for="v in page.taskList" @tap.stop="go(v)">
                <div class="cardList">
                    <div class="crm_car_list">
                        <!--                        <span v-show="v.status" class="mui-icon mui-icon-checkmarkempty mui-right greenicon color9"></span>-->
                        <!--                        <span v-show="!v.status" class="mui-icon mui-icon-checkmarkempty mui-right greenicon"-->
                        <!--                              style="color:#ccc2c2"></span>-->
                        <div class="list_head">
                            <span><img src="../../img/time.svg"/> </span>
                            <p v-text="v.MMRFTIME"></p>
                        </div>
                        <div class="list_body">
                            <p v-text="v.GWAKL004"></p>
                            <p v-text="v.MMRD011"></p>
                        </div>
                        <div class="list_footer">
                            <p v-text="v.MMRFUSERNAME"></p>
                        </div>
                    </div>
                    <div>
                        地址<p v-text="v.MMRD012"></p>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="page.taskList.length==0" class="mui-card-footer nodata">
            <img src="../../img/nodata.svg"/>
            <!--            <p>您暂时还没有相关任务</p>-->
        </div>
    </div>
</div>
<nav id="foot" @tap.stop="" class="mui-bar mui-bar-tab mbsbar">
    <a id="scan" class="mui-tab-item" @tap.stop="openFoot('pg')">
        <span class="iconfont icon icon-005"></span>
        <p class="mui-tab-label">派工</p>
    </a>
    <a id="gwc" class="mui-tab-item" @tap.stop="openFoot('bg')">
        <span class="iconfont icon icon-006"></span>
        <p class="mui-tab-label">报工</p>
    </a>
    <a id="me" class="mui-tab-item" @tap.stop="openFoot('wo')">
        <span class="iconfont icon icon-004"></span>
        <p class="mui-tab-label">我的</p>
    </a>
</nav>
</body>
</html>